<template>
  <div class="page_index_h">
    <van-nav-bar :title="detailItem_h.name" left-arrow @click-left="$router.back()" />
    <div class="content">
      <div class="desc" v-show="detailItem_h.id === '1'">
        <div class="title_1">1、代招分享:</div>
        <div style="text-indent: 2em">通过软件线上线下，分享链接、海报、传单、名片、推广代招赚钱。</div>
        <div class="title_2">2、推广代招赚钱说明:</div>
        <div style="text-indent: 2em">
          推荐别人注册下载软件以后、可在【推广用户】里面看到我推荐的用户，并且看到用户是否报名，是否上班，以及每个月上班的工时，和代招费。
        </div>
        <div style="text-indent: 2em">
          平台、用人单位、或者中介、会在上班用户发工资的时候分发代招费，分发代招费以后，可在【推广用户】里面查看，也可以在【钱包】里面提现。
        </div>
        <div class="title_2">3、特别说明:</div>
        <div style="text-indent: 2em">
          平台为了保护个人隐私和安全，所以看不到我推荐的用户，在那个用人单位上班，敬请谅解。
        </div>
      </div>

      <div class="saveToPhone" id="saveToPhone" v-show="detailItem_h.id === '2'">
        (按住保存图片)将保存到手机的海报图片发送到微信朋友圈、QQ空间、等各大社交软件、或者发给好友推广代招赚钱。
      </div>

      <div class="card" v-show="detailItem_h.id === '3'">
        <div class="title_1">1、定做名片:</div>
        <div style="text-indent: 2em">
          一般放在、身上、车上、商品包装里面、或者去人流量多的地方发名片、等等、推广代招赚钱，用途不一样，大小尺寸不一样，建议咨询客服定做。
          <van-button type="info" size="small" round @click="handleCopy">点击咨询</van-button>
        </div>
      </div>

      <div class="paster" v-show="detailItem_h.id === '4'">
        <div class="title_1">1、定做贴纸:</div>
        <div style="text-indent: 2em">
          一般贴在桌子上、门上、墙上、商品上、车上、广告位上面、等等、推广代招赚钱，用途不一样，大小尺寸不一样，建议咨询客服定做。
          <van-button type="info" size="small" round @click="handleCopy">点击咨询</van-button>
        </div>
      </div>

      <div class="ad" v-show="detailItem_h.id === '5'">
        <div class="title_1">1、定做传单:</div>
        <div style="text-indent: 2em">
          一般放在商品包装里面、或者去人流量多的地方发传单、等等、推广代招赚钱，用途不一样，大小尺寸不一样，建议咨询客服定做。
          <van-button type="info" size="small" round @click="handleCopy">点击咨询</van-button>
        </div>
      </div>

      <div class="make_poster" v-show="detailItem_h.id === '6'">
        <div class="title_1">1、定做海报:</div>
        <div style="text-indent: 2em">
          一般用在店门口、家门口，等等、推广代招赚钱，用途不一样，大小尺寸不一样，建议咨询客服定做。
          <van-button type="info" size="small" round @click="handleCopy">点击咨询</van-button>
        </div>
      </div>
    </div>

    <div>
      <!-- <vue-qr :text="downloadData.url" :margin="10" colorDark="#000" colorLight="#fff" :dotScale="1" :logoScale="0.2" :size="200"></vue-qr> -->
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import {Toast} from 'vant'
export default {
  name: 'index_h',
  data() {
    return {
      detailItem_h: {},
      linkPhone: '13790143381',
      downloadData: {
        url: 'https://www.jinpin.love' //需要转化成二维码的网址
      }
    }
  },
  components: {
    vueQr
  },

  created() {
    const item = this.$route.params.item || localStorage.getItem('detailItem_h')
    // 若有obj, 则保存
    if (item) {
      if (this.$route.params.item) {
        localStorage.setItem('detailItem_h', item)
      }
      this.detailItem_h = JSON.parse(localStorage.getItem('detailItem_h'))
    } else {
      this.$router.push('/mine');
      localStorage.removeItem('detailItem_h')
    }
  },

  methods: {
    handleCopy: function() {
      this.$copyText(this.linkPhone).then(
        function(e) {
          Toast('复制成功, 将联系方式粘贴到手机电话即可联系咨询，或粘贴添加微信咨询。')
        },
        function(e) {
          Toast('复制出错')
        }
      )
    }
  },

  beforeDestroy() {
    // 清除
    localStorage.removeItem('detailItem_h')
  }
}
</script>

<style lang="scss" scoped>
.page_index_h {
  width: 100%;
  .content {
    box-sizing: border-box;
    padding: 16px;
    text-align: justify;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.5em;

    .title_1 {
      font-weight: bolder;
      margin-bottom: 10px;
    }
    .title_2 {
      margin-bottom: 10px;
      font-weight: bolder;
      margin-top: 10px;
    }

    .desc {
    }
    .saveToPhone {
      text-indent: 2em;
    }
    .paster {
    }
  }
}
</style>
